﻿@page "/docs/extensions/richtextedit"

<Seo Canonical="/docs/extensions/richtextedit" Title="Blazorise RichTextEdit component" Description="Learn to use and work with the Blazorise RichTextEdit component, which allows you to add and use a ‘WYSIWYG’ rich text editor." />

<DocsPageTitle Path="Extensions/RichTextEdit">
    Blazorise RichTextEdit component
</DocsPageTitle>

<DocsPageLead>
    The <Code>RichTextEdit</Code> component allows you to add and use a ‘WYSIWYG’ rich text editor.
</DocsPageLead>

<DocsPageParagraph>
    The Blazorise RichTextEdit is based on the <Blazorise.Link To="https://quilljs.com/" Target="Target.Blank">QuillJS</Blazorise.Link> JavaScript library.
</DocsPageParagraph>

<UnorderedList>
    <UnorderedListItem>
        <Code>RichTextEdit</Code> the root editor component
        <UnorderedList>
            <UnorderedListItem><Code>Editor</Code> (Optional) the editor part with displayed html content</UnorderedListItem>
            <UnorderedListItem>
                <Code>Toolbar</Code> (Optional) the editor toolbar definition
                <UnorderedList>
                    <UnorderedListItem>
                        <Code>RichTextEditToolbarGroup</Code> toolbar group
                        <UnorderedList>
                            <UnorderedListItem><Code>RichTextEditToolbarButton</Code> toolbar button</UnorderedListItem>
                            <UnorderedListItem>
                                <Code>RichTextEditToolbarSelect</Code> toolbar selection dropdown
                                <UnorderedList>
                                    <UnorderedListItem><Code>RichTextEditToolbarSelectItem</Code> toolbar selection item</UnorderedListItem>
                                </UnorderedList>
                            </UnorderedListItem>
                            <UnorderedListItem>any custom button or component</UnorderedListItem>
                        </UnorderedList>
                    </UnorderedListItem>
                </UnorderedList>
            </UnorderedListItem>
        </UnorderedList>
    </UnorderedListItem>
</UnorderedList>

<DocsPageSubtitle>
    Installation
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="NuGet">
        Install extension from NuGet.
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="RichTextEditNugetInstallExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Imports">
        In your main <Badge Color="Color.Light">_Imports.razor</Badge> add:
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="RichTextEditImportsExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Configuration">
        In your Blazor <Code>StartUp</Code> add the following statement
    </DocsPageSectionHeader>
    <DocsPageSectionSource Code="RichTextEditStartupExample"></DocsPageSectionSource>
</DocsPageSection>

<DocsPageSubtitle>
    Configuration options
</DocsPageSubtitle>

<DocsAttributes>
    <DocsAttributesItem Name="UseShowTheme" Type="bool" Default="true">
        Load the QuillJS snow theme related resources.
    </DocsAttributesItem>
    <DocsAttributesItem Name="UseBubbleTheme" Type="bool" Default="false">
        Load the QuillJS bubble theme related resources.
    </DocsAttributesItem>
    <DocsAttributesItem Name="QuillJSVersion" Type="string" Default="1.3.7">
        The QuillJS version to load.
    </DocsAttributesItem>
    <DocsAttributesItem Name="DynamicLoadReferences" Type="bool" Default="true">
        Load the RichTextEdit scripts and stylesheets on demand.
    </DocsAttributesItem>
</DocsAttributes>

<DocsPageSection>
    <DocsPageSectionHeader Title="Basic example">
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <RichTextEditExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="RichTextEditExample" />
</DocsPageSection>

<DocsPageSubtitle>
    Editor customization
</DocsPageSubtitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Theming">
        The <Code>RichTextEdit</Code> comes default with 2 themes <Code>Snow</Code> and <Code>Bubble</Code>. The <Code>Snow</Code> theme is a simple flat toolbar theme and the <Code>Bubble</Code> theme is a tooltip based theme where the toolbar will be displayed in the tooltip.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        See <Blazorise.Link To="https://quilljs.com/docs/themes/" Target="Target.Blank">QuillJS Themes</Blazorise.Link> for more information.
    </DocsPageSectionContent>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Toolbar">
        The <Code>RichTextEdit</Code> toolbar can be completely customized. QuillJS defines a number of default actions that can be used through the <Code>RichTextEditToolbarButton</Code> and <Code>RichTextEditToolbarSelect</Code> components
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        See <Blazorise.Link To="https://quilljs.com/docs/modules/toolbar/" Target="Target.Blank">QuillJS Toolbar module</Blazorise.Link> for more information.
    </DocsPageSectionContent>
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="QuillJS Configuration">
        The <Code>RichTextEdit</Code> has the option to inject additional QuillJS configuration logic or load additional <Blazorise.Link To="https://github.com/quilljs/awesome-quill" Target="Target.Blank">modules</Blazorise.Link>. Use the <Code>ConfigureQuillJSMethod</Code> property to indicate which javascript method needs to be called during initialization.

        If you for example want to change the way how links are sanitized you can use the following logic. Default all user typed url’s are relative to your pages base url. So when a user types <Code>google.com</Code> this will result in something like <Code>https://baseurl/google.com</Code>, but if you would probably like <Code>https://google.com</Code> then use the following configuration routine.
    </DocsPageSectionHeader>
    <DocsPageSectionContent Outlined FullWidth>
        <RichTextEditConfigurationExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="RichTextEditConfigurationExample" />
</DocsPageSection>

<DocsPageSubtitle>
    API
</DocsPageSubtitle>

<Heading Size="HeadingSize.Is3">
    Attributes
</Heading>

<DocsAttributes Title="RichTextEdit">
    <DocsAttributesItem Name="Toolbar" Type="markup">
        The custom toolbar definition.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Editor" Type="markup">
        The editor content.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ReadOnly" Type="bool" Default="false">
        Editor read-only flag.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Theme" Type="RichTextEditTheme" Default="Snow">
        The editor theme.
    </DocsAttributesItem>
    <DocsAttributesItem Name="PlaceHolder" Type="string">
        Placeholder text for empty editor.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ToolbarPosition" Type="Placement" Default="Top">
        Toolbar position (top or bottom).
    </DocsAttributesItem>
    <DocsAttributesItem Name="SubmitOnEnter" Type="bool" Default="false">
        Call EnterPressed event when pressing ENTER key.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ContentChanged" Type="EventCallback">
        Occurs when the content changes.
    </DocsAttributesItem>
    <DocsAttributesItem Name="EnterPressed" Type="EventCallback">
        Occurs when ENTER key is pressed and SubmitOnEnter.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ConfigureQuillJSMethod" Type="string">
        The JavaScript method to call to configure additional QuillJS modules and or add custom bindings.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="RichTextEditToolbarGroup">
    <DocsAttributesItem Name="Float" Type="float">
        The float position on the toolbar.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ChildContent" Type="markup">
        The group content.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="RichTextEditToolbarButton">
    <DocsAttributesItem Name="Action" Type="RichTextEditAction?">
        The QuillJS action associated with the select.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Value" Type="string">
        The QuillJS action selected value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ChildContent" Type="markup">
        The custom markup/text to display.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="RichTextEditToolbarSelect">
    <DocsAttributesItem Name="Action" Type="RichTextEditAction?">
        The QuillJS action associated with the select.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ChildContent" Type="markup">
        The RichTextEditToolbarSelectItem items.
    </DocsAttributesItem>
</DocsAttributes>

<DocsAttributes Title="RichTextEditToolbarSelectItem">
    <DocsAttributesItem Name="Value" Type="string">
        The QuillJS action selected value.
    </DocsAttributesItem>
    <DocsAttributesItem Name="Selected" Type="bool" Default="false">
        Is the select item selected.
    </DocsAttributesItem>
    <DocsAttributesItem Name="ChildContent" Type="markup">
        The custom markup/text to display.
    </DocsAttributesItem>
</DocsAttributes>